<template>
	<custom-navbar title="查看反馈"></custom-navbar>
	<view class="feedback">
		<book-link :fileId="fileId"></book-link>
		<view class="controll">
			<view class="staticAdd">
				<view class="detailWrap" id="pdfContent">
				    <view class="feedVast">
				    	<text>检察意见反馈</text>
				<!--    	<view @tap="exportReport" v-if="isShowBth">
				    		<image src="../../static/icon/downLoad_blue.png" mode=""></image>
				    		<text>下载反馈</text>
				    	</view> -->
				    </view>
					<view class="title">
					 其他描述
					</view>
					<view class="otherContent">
						{{suggestOther}}
					</view>
					<view class="title">
					 回函
					</view>
					<FileWrap :fileName="item.fileOriginalName" :fileType="item.fileSuffix"  v-for="(item,index) in feefBackFileList" :key="index" @tap="previewFile(item)"></FileWrap>
					<view class="title">
					 是否做出行政处罚
					</view>
					<view class="otherContent">
					{{ispublish === "1" ? '是' : '否'}}
					</view>
					 <view style="height: 60rpx;"></view>
					<view class="feedVast">
						<text>公益诉讼效果反馈</text>
				<!-- 		<view @tap="exportReport" v-if="isShowBth">
							<image src="../../static/icon/downLoad_blue.png" mode=""></image>
							<text>下载反馈</text>
						</view> -->
					</view>
					<template v-for="({children:feedBackAreaData,title},index) in comprehensiveList" :key="index">
						<view class="env_area">
							{{title}}
						</view>
						<view class="evaluate">
							<view class="title">
								效果评估
							</view>
							<view class="source">
								<text>{{feedBackAreaData.evalute.title}}</text>
								<view>
									<image src="../../static/icon/canlender.png" mode=""></image>
									<text>{{feedBackAreaData.evalute.fieldValue}}</text>
								</view>
							</view>
						</view>
						<view class="evaluate" v-for="(val,index) in feedBackAreaData.content" :key="index" >
							<view class="title">
								{{val.title}}
							</view>
							<view class="areaDash" v-for="(item,ind) in val.list" :key="ind">
								<view class="area_title">
									{{item.dictLabel}}
								</view>
								<view class="numAll" v-show="item.dictLabel !== '其他描述'">
									<text>{{item.fieldValue}}</text>
									<text>({{item.dictRemarks}})</text>
								</view>
								<view class="otherContent" v-show="item.dictLabel === '其他描述'">
									{{item.fieldValue}}
								</view>
							</view>
						</view>
					</template>
					<template v-if="comprehensiveList.length === 0">
						<view class="empty">暂无效果反馈</view>
					</template>
				</view>
			</view>
		</view>
		
		<view class="lines">
		—————— <text>补充材料</text> ——————
		</view>
		<template v-for="(item,index) in addDataInfoList" :key="index">
			<view class="record" v-show="addDataInfoList.length > 1">
				第{{addDataInfoList.length - index}}次补充
			</view>
			<view class="others addFile">
				<view class="title">
					补充内容
				</view>
				<view class="otherContent">
					{{item.content}}
				</view>
			</view>
			<view class="staticFile">
				<view class="title">
					附件
				</view>
			<FileWrap :fileName="val.fileOriginalName" :fileType="val.fileSuffix"  v-for="(val,index) in item.supplementDocuments" :key="index" @tap="previewFile(val)"></FileWrap>
			<template v-if="item.supplementDocuments.length === 0">
				<view class="empty">
				暂无附件
				</view>
			</template>
			</view>
			<image src="../../static/img/splitLine.png" mode="" class="splitLine"  v-show="addDataInfoList.length > 1"></image>
		</template>

		<template v-if="addDataInfoList.length === 0">
			<view  class="empty">暂无补充材料</view>
		</template>
	</view>
</template>

<script setup>
import { ref,reactive } from 'vue';
import {onLoad,onShow} from '@dcloudio/uni-app'
import {getFeedbackFieldList,addFeedbackData,getFeedbackFieldDetails,getSupplementaryDetails,getFeedbackDetails} from '@/api/document.js'
import {useProcessStore} from '@/store/index.js'
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
const processStore = useProcessStore()
const fileId = ref("")
const fileListInfo = [
	[{uploadType:"file"},{uploadType:"image"}],
	[]
]
onLoad((data)=>{
	fileId.value = data.deliveryId
	processStore.clearProcess()
})
onShow(()=>{
	getFeedbackDetail(fileId.value)
	getAddDataInfo(fileId.value)
	getFeedbackDetailMore()
})
const feedBackList = ref([])
uni.setNavigationBarTitle({
	title:"检察意见反馈"
})
// 前往细节填写
const skipItemDetail = (item)=>{
	let	url =  `/pages/seeFeedBack/seeFeedBack?deliveryId=${fileId.value}&field=${item.fieldType}`
	uni.navigateTo({
		url
	})
}
// 获取反馈详情
const feefBackFileList = ref([])
const suggestOther = ref("")
const ispublish =ref("")
const getFeedbackDetailMore = async()=>{
const {code,data:res} = await getFeedbackDetails({
	 deliveryId:fileId.value
 })
 if(code === 200){
	 feefBackFileList.value = res.files || []
	 suggestOther.value = res.replyOthers
	 ispublish.value = res.isAdminiPenalized
 }
}
// 获取综合反馈领域
const comprehensiveList = ref([])
// 获取反馈领域列表
const feedBackAreaData = reactive({
	evalute:{
		name:"",
		title:"",
		fieldValue:""
	},
	content:[]
})
const getFeedbackDetail = async(deliveryId)=>{
const {code,data:res} = await getFeedbackFieldDetails({
		deliveryId
	})
	if(code === 200){
		comprehensiveList.value = res.reduce((curr,val)=>{
	  const flag = curr.some(item=>item.title === val.fieldTypeLabel)
	  if(!flag){
		curr.push({
			title:val.fieldTypeLabel,
			children:middleWear(val)
		})  
	  }else{
		   const indexFind = curr.findIndex(item=>item.title === val.fieldTypeLabel)
		   if(val.smallType == "效果评估"){
				 curr[indexFind].children.evalute.name = val.smallType
				 curr[indexFind].children.evalute.title = val.feedbackFieldVoList[0].dictLabel
				 curr[indexFind].children.evalute.fieldValue = val.feedbackFieldVoList[0].fieldValue
		   }else{
			  curr[indexFind].children.content.push({
			   title:val.smallType,
			   list:val.feedbackFieldVoList
			  }) 
		   }
	  }
	curr = curr.reduce((currson,val)=>{
		 const indexPar = val.children.content.findIndex(item => item.title === "其他")
		 if (indexPar !== -1) {
		   // 用splice将该元素从原位置移除，再用unshift将它添加到数组开头
		   let temp = val.children.content.splice(indexPar, 1);
		   val.children.content.push(temp[0]);
		 }
		 currson.push(val)
		return currson
	  },[])
		 return curr
	},[])
	}
}
const middleWear = (val)=>{
	let obj = {
		evalute:{
			name:"",
			title:"",
			fieldValue:""
		},
		content:[]
	}
	if(val.smallType == "效果评估"){
			obj.evalute.name = val.smallType
			obj.evalute.title = val.feedbackFieldVoList[0].dictLabel
			obj.evalute.fieldValue = val.feedbackFieldVoList[0].fieldValue
	}else{
		obj.content.push({
		title:val.smallType,
		list:val.feedbackFieldVoList
		})
	
	}

	return obj
}
// 获取补充内容
const addDataInfoList = ref([]) //补充内容
const getAddDataInfo = async(deliveryId)=>{
const {code,data:res} = await getSupplementaryDetails({
	deliveryId
})
if(code === 200){
	addDataInfoList.value = res
}
}

//将页面生成pdf报告下载
const isShowBth = ref(true)
const exportReport=async()=>{
			  // #ifdef H5
			    isShowBth.value = false
				 const element = document.getElementById('pdfContent');
				  const pdf = new jsPDF();
				  const pageHeight = pdf.internal.pageSize.getHeight();
				  const pageWidth = pdf.internal.pageSize.getWidth();
				  
				  // 计算元素总高度（像素转毫米）
				  const elementHeight = element.scrollHeight;
				  const pxToMm = 0.264583; // 1px ≈ 0.264583mm
				  const totalHeight = elementHeight * pxToMm;

				  // 分页渲染
				  let position = 0;
				  let pageNum = 1;
				  
				  while (position < totalHeight) {
					if (pageNum > 1) pdf.addPage(); // 从第二页开始添加新页
					
					// 截取当前页内容
					const canvas = await html2canvas(element, {
					  height: pageHeight / pxToMm, // 设置canvas高度为单页高度
					  windowHeight: element.scrollHeight,
					  scrollY: -position / pxToMm, // 滚动到当前页起始位置
					  useCORS: true, // 解决跨域图片
					  scale: 1 // 提高清晰度
					});

					const imgData = canvas.toDataURL('image/jpeg', 0.92);
					pdf.addImage(imgData, 'JPEG', 0, -position, pageWidth, totalHeight);
					position += pageHeight; // 移动到下一页
					pageNum++;
				  }
				  pdf.save('report.pdf');
			  // #endif
			}
			const previewFile = (item)=>{
				 const {fileOriginalName,fileSuffix,fileUrlOss} = item
				 const fileType = fileSuffix.replace(/^\./, "")
				 uni.navigateTo({
				 	url:`/pages/fileDetail/fileDetail?fileOriginalName=${fileOriginalName}&fileType=${fileType}&fileUrl=${fileUrlOss}`
				 })
			}
</script>

<style lang="scss" scoped>

.controll{
	margin-bottom: 50rpx;

}
.feedback{
	padding:35rpx;
	.title{
		font-weight: 600;
		font-size: 32rpx;
		color: #00041A;
		margin: 32rpx 0;
	}
	.required{
		>text{
		display: inline-block;
		position: relative;
		&::after{
			position: absolute;
			content: "*";
			right: -20rpx;
			top: 50%;
			transform: translateY(-50%);
			color: #FF4122;
		}	
		}

	}
	}
	

	:deep(.uni-textarea){
		width: 100%;
		height: 100%;
	}
	:deep(.checklist-group){
		margin: 30rpx 0 80rpx;
	}
	.lines{
		padding: 20rpx 0;
		color: #BBC0C9;	
		text-align: center;
		text{
		font-weight: 400;
		font-size: 28rpx;
		}
	}
	.others{
		margin-top: 35rpx;
		.title{
			font-weight: 600;
			font-size: 32rpx;
			color: #00041A;
			margin-bottom: 35rpx;
		}
	
	}
	.otherContent{
		font-weight: 400;
		font-size: 28rpx;
		color: #44474A;
	}
	.staticFile{
		margin-top: 35rpx;
		.title{
		font-weight: 600;
		margin-top: 15rpx;
		font-size: 32rpx;
		color: #00041A;
		margin-bottom: 32rpx;
		}
	
	}
	.detailWrap{
			.feedVast{
				display: flex;
				justify-content: space-between;
				align-items: center;
				>text{
					font-weight: 500;
					font-size: 40rpx;
					color: #00041A;
				}
				>view{
					>image{
						width: 30rpx;
						height: 30rpx;
						vertical-align: middle;
						margin-right: 5rpx;
					}
					>text{
						font-weight: 400;
						font-size: 28rpx;
						color: #0D53FE;
					}
				}
			}
			.env_area{
				align-items: center;
				margin-top: 32rpx;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				background: #F7F9FD;
				font-size: 28rpx;
			}
			.evaluate{
				margin-top: 48rpx;
				.title{
					font-weight: 600;
					font-size: 32rpx;
					color: #00041A;
				}
		      .areaDash{
				  .area_title{
					  padding: 18rpx 0;
					 font-weight: 400;
					 font-size: 28rpx;
					 color: #686A73; 
				  }
	.numAll{
		padding: 18rpx 0;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #F5FAFF;
	}
			}
			.source{
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #F5FAFF;
				padding: 18rpx 0;
				>text{
				font-weight: 400;
				font-size: 28rpx;
				color: #686A73; 
				max-width: 400rpx;
				}
				>view{
					>image{
						width: 28rpx;
						height: 28rpx;
						vertical-align: middle;
						margin-right: 5rpx;
					}
					>text{
						font-weight: 400;
						font-size: 28rpx;
						color: #00041A;
					}
				}
			}
			}
	
		.otherContent{
			font-weight: 400;
			font-size: 28rpx;
			color: #44474A;
		}
	
		.addFile{
			margin-top: 15rpx;
		}
	
		}
		.record{
			text-align: center;
			color: #BBC0C9;
		}
		.splitLine{
		 height: 1rpx;
		 width: 100%;
		 margin-bottom: 15rpx;
		}
		.empty{
			margin: 15rpx;
				color: #00041A;
		}
</style>
